[V0_FILE]css:file="app/globals.css" isQuickEdit="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.039 0 0); /* #0A0A0A */ --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: "Geist", "Geist Fallback"; --font-mono: "Geist Mono", "Geist Mono Fallback"; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]jpg:file="public/mlh-logo.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/mlh-logo-A4HO3v0wT6Fte55PJZQpLDQGlD7PuM.jpg" [V0_FILE]jpg:file="public/devfolio-logo.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/devfolio-logo-fOhT2wPufeO3TbvFRrllZk6BrZyUf2.jpg" [V0_FILE]png:file="public/images/partners/google-cloud-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/partners/google-cloud-logo-oZ8x3jH73fmjKzPVdDnBgbIsEFSKit.png" [V0_FILE]jpg:file="public/mlh-major-league-hacking.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/mlh-major-league-hacking-xJgLUoLpWpJKmzFFWoqxJk04EBt95W.jpg" [V0_FILE]jpg:file="public/devfolio.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/devfolio-rOoZvt2lllEkH4LaDNH5ytqA1mi88v.jpg" [V0_FILE]png:file="public/github-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/github-logo-UKUaaUf52gFsceoS3KUS3Msem6Nytc.png" [V0_FILE]png:file="public/google-cloud-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/google-cloud-logo-Um9ZNBWjPiOHh8ckYuYYsaZTVwqHxR.png" [V0_FILE]jpg:file="public/vercel.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/vercel-LJ0RQEHphvQ7Q94aBSk2J8dmPDshgJ.jpg" [V0_FILE]jpg:file="public/mongodb.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/mongodb-SARNjsL0YuE68yIu1wjyAiFwaraZuk.jpg" [V0_FILE]typescriptreact:file="components/pixel-blast.tsx" "use client" import type React from "react" import { useEffect, useRef } from "react" import * as THREE from "three" import { EffectComposer, EffectPass, RenderPass, Effect } from "postprocessing" type PixelBlastVariant = "square" | "circle" | "triangle" | "diamond" type PixelBlastProps = { variant?: PixelBlastVariant pixelSize?: number color?: string className?: string style?: React.CSSProperties antialias?: boolean patternScale?: number patternDensity?: number liquid?: boolean liquidStrength?: number liquidRadius?: number pixelSizeJitter?: number enableRipples?: boolean rippleIntensityScale?: number rippleThickness?: number rippleSpeed?: number liquidWobbleSpeed?: number autoPauseOffscreen?: boolean speed?: number transparent?: boolean edgeFade?: number noiseAmount?: number } const createTouchTexture = () => { const size = 64 const canvas = document.createElement("canvas") canvas.width = size canvas.height = size const ctx = canvas.getContext("2d") if (!ctx) throw new Error("2D context not available") ctx.fillStyle = "black" ctx.fillRect(0, 0, canvas.width, canvas.height) const texture = new THREE.Texture(canvas) texture.minFilter = THREE.LinearFilter texture.magFilter = THREE.LinearFilter texture.generateMipmaps = false const trail: { x: number y: number vx: number vy: number force: number age: number }[] = [] let last: { x: number; y: number } | null = null const maxAge = 64 let radius = 0.1 * size const speed = 1 / maxAge const clear = () => { ctx.fillStyle = "black" ctx.fillRect(0, 0, canvas.width, canvas.height) } const drawPoint = (p: { x: number; y: number; vx: number; vy: number; force: number; age: number }) => { const pos = { x: p.x * size, y: (1 - p.y) * size } let intensity = 1 const easeOutSine = (t: number) => Math.sin((t * Math.PI) / 2) const easeOutQuad = (t: number) => -t * (t - 2) if (p.age < maxAge * 0.3) intensity = easeOutSine(p.age / (maxAge * 0.3)) else intensity = easeOutQuad(1 - (p.age - maxAge * 0.3) / (maxAge * 0.7)) || 0 intensity *= p.force const color = `${((p.vx + 1) / 2) * 255}, ${((p.vy + 1) / 2) * 255}, ${intensity * 255}` const offset = size * 5 ctx.shadowOffsetX = offset ctx.shadowOffsetY = offset ctx.shadowBlur = radius ctx.shadowColor = `rgba(${color},${0.22 * intensity})` ctx.beginPath() ctx.fillStyle = "rgba(255,0,0,1)" ctx.arc(pos.x - offset, pos.y - offset, radius, 0, Math.PI * 2) ctx.fill() } const addTouch = (norm: { x: number; y: number }) => { let force = 0 let vx = 0 let vy = 0 if (last) { const dx = norm.x - last.x const dy = norm.y - last.y if (dx === 0 && dy === 0) return const dd = dx * dx + dy * dy const d = Math.sqrt(dd) vx = dx / (d || 1) vy = dy / (d || 1) force = Math.min(dd * 10000, 1) } last = { x: norm.x, y: norm.y } trail.push({ x: norm.x, y: norm.y, age: 0, force, vx, vy }) } const update = () => { clear() for (let i = trail.length - 1; i >= 0; i--) { const point = trail[i] const f = point.force * speed * (1 - point.age / maxAge) point.x += point.vx * f point.y += point.vy * f point.age++ if (point.age > maxAge) trail.splice(i, 1) } for (let i = 0; i < trail.length; i++) drawPoint(trail[i]) texture.needsUpdate = true } return { canvas, texture, addTouch, update, set radiusScale(v: number) { radius = 0.1 * size * v }, get radiusScale() { return radius / (0.1 * size) }, size, } } const createLiquidEffect = (texture: THREE.Texture, opts?: { strength?: number; freq?: number }) => { const fragment = ` uniform sampler2D uTexture; uniform float uStrength; uniform float uTime; uniform float uFreq; void mainUv(inout vec2 uv) { vec4 tex = texture2D(uTexture, uv); float vx = tex.r * 2.0 - 1.0; float vy = tex.g * 2.0 - 1.0; float intensity = tex.b; float wave = 0.5 + 0.5 * sin(uTime * uFreq + intensity * 6.2831853); float amt = uStrength * intensity * wave; uv += vec2(vx, vy) * amt; } ` return new Effect("LiquidEffect", fragment, { uniforms: new Map([ ["uTexture", new THREE.Uniform(texture)], ["uStrength", new THREE.Uniform(opts?.strength ?? 0.025)], ["uTime", new THREE.Uniform(0)], ["uFreq", new THREE.Uniform(opts?.freq ?? 4.5)], ]), }) } const SHAPE_MAP: Record = { square: 0, circle: 1, triangle: 2, diamond: 3, } const VERTEX_SRC = ` void main() { gl_Position = vec4(position, 1.0); } ` const FRAGMENT_SRC = ` precision highp float; uniform vec3 uColor; uniform vec2 uResolution; uniform float uTime; uniform float uPixelSize; uniform float uScale; uniform float uDensity; uniform float uPixelJitter; uniform int uEnableRipples; uniform float uRippleSpeed; uniform float uRippleThickness; uniform float uRippleIntensity; uniform float uEdgeFade; uniform int uShapeType; const int SHAPE_SQUARE = 0; const int SHAPE_CIRCLE = 1; const int SHAPE_TRIANGLE = 2; const int SHAPE_DIAMOND = 3; const int MAX_CLICKS = 10; uniform vec2 uClickPos [MAX_CLICKS]; uniform float uClickTimes[MAX_CLICKS]; out vec4 fragColor; float Bayer2(vec2 a) { a = floor(a); return fract(a.x / 2. + a.y * a.y * .75); } #define Bayer4(a) (Bayer2(.5*(a))*0.25 + Bayer2(a)) #define Bayer8(a) (Bayer4(.5*(a))*0.25 + Bayer2(a)) #define FBM_OCTAVES 5 #define FBM_LACUNARITY 1.25 #define FBM_GAIN 1.0 float hash11(float n){ return fract(sin(n)*43758.5453); } float vnoise(vec3 p){ vec3 ip = floor(p); vec3 fp = fract(p); float n000 = hash11(dot(ip + vec3(0.0,0.0,0.0), vec3(1.0,57.0,113.0))); float n100 = hash11(dot(ip + vec3(1.0,0.0,0.0), vec3(1.0,57.0,113.0))); float n010 = hash11(dot(ip + vec3(0.0,1.0,0.0), vec3(1.0,57.0,113.0))); float n110 = hash11(dot(ip + vec3(1.0,1.0,0.0), vec3(1.0,57.0,113.0))); float n001 = hash11(dot(ip + vec3(0.0,0.0,1.0), vec3(1.0,57.0,113.0))); float n101 = hash11(dot(ip + vec3(1.0,0.0,1.0), vec3(1.0,57.0,113.0))); float n011 = hash11(dot(ip + vec3(0.0,1.0,1.0), vec3(1.0,57.0,113.0))); float n111 = hash11(dot(ip + vec3(1.0,1.0,1.0), vec3(1.0,57.0,113.0))); vec3 w = fp*fp*fp*(fp*(fp*6.0-15.0)+10.0); float x00 = mix(n000, n100, w.x); float x10 = mix(n010, n110, w.x); float x01 = mix(n001, n101, w.x); float x11 = mix(n011, n111, w.x); float y0 = mix(x00, x10, w.y); float y1 = mix(x01, x11, w.y); return mix(y0, y1, w.z) * 2.0 - 1.0; } float fbm2(vec2 uv, float t){ vec3 p = vec3(uv * uScale, t); float amp = 1.0; float freq = 1.0; float sum = 1.0; for (int i = 0; i < FBM_OCTAVES; ++i){ sum += amp * vnoise(p * freq); freq *= FBM_LACUNARITY; amp *= FBM_GAIN; } return sum * 0.5 + 0.5; } float maskCircle(vec2 p, float cov){ float r = sqrt(cov) * .25; float d = length(p - 0.5) - r; float aa = 0.5 * fwidth(d); return cov * (1.0 - smoothstep(-aa, aa, d * 2.0)); } float maskTriangle(vec2 p, vec2 id, float cov){ bool flip = mod(id.x + id.y, 2.0) > 0.5; if (flip) p.x = 1.0 - p.x; float r = sqrt(cov); float d = p.y - r*(1.0 - p.x); float aa = fwidth(d); return cov * clamp(0.5 - d/aa, 0.0, 1.0); } float maskDiamond(vec2 p, float cov){ float r = sqrt(cov) * 0.564; return step(abs(p.x - 0.49) + abs(p.y - 0.49), r); } void main(){ float pixelSize = uPixelSize; vec2 fragCoord = gl_FragCoord.xy - uResolution * .5; float aspectRatio = uResolution.x / uResolution.y; vec2 pixelId = floor(fragCoord / pixelSize); vec2 pixelUV = fract(fragCoord / pixelSize); float cellPixelSize = 8.0 * pixelSize; vec2 cellId = floor(fragCoord / cellPixelSize); vec2 cellCoord = cellId * cellPixelSize; vec2 uv = cellCoord / uResolution * vec2(aspectRatio, 1.0); float base = fbm2(uv, uTime * 0.05); base = base * 0.5 - 0.65; float feed = base + (uDensity - 0.5) * 0.3; float speed = uRippleSpeed; float thickness = uRippleThickness; const float dampT = 1.0; const float dampR = 10.0; if (uEnableRipples == 1) { for (int i = 0; i < MAX_CLICKS; ++i){ vec2 pos = uClickPos[i]; if (pos.x < 0.0) continue; float cellPixelSize = 8.0 * pixelSize; vec2 cuv = (((pos - uResolution * .5 - cellPixelSize * .5) / (uResolution))) * vec2(aspectRatio, 1.0); float t = max(uTime - uClickTimes[i], 0.0); float r = distance(uv, cuv); float waveR = speed * t; float ring = exp(-pow((r - waveR) / thickness, 2.0)); float atten = exp(-dampT * t) * exp(-dampR * r); feed = max(feed, ring * atten * uRippleIntensity); } } float bayer = Bayer8(fragCoord / uPixelSize) - 0.5; float bw = step(0.5, feed + bayer); float h = fract(sin(dot(floor(fragCoord / uPixelSize), vec2(127.1, 311.7))) * 43758.5453); float jitterScale = 1.0 + (h - 0.5) * uPixelJitter; float coverage = bw * jitterScale; float M; if (uShapeType == SHAPE_CIRCLE) M = maskCircle (pixelUV, coverage); else if (uShapeType == SHAPE_TRIANGLE) M = maskTriangle(pixelUV, pixelId, coverage); else if (uShapeType == SHAPE_DIAMOND) M = maskDiamond(pixelUV, coverage); else M = coverage; if (uEdgeFade > 0.0) { vec2 norm = gl_FragCoord.xy / uResolution; float edge = min(min(norm.x, norm.y), min(1.0 - norm.x, 1.0 - norm.y)); float fade = smoothstep(0.0, uEdgeFade, edge); M *= fade; } vec3 color = uColor; fragColor = vec4(color, M); } ` const MAX_CLICKS = 10 const PixelBlast: React.FC = ({ variant = "square", pixelSize = 3, color = "#B19EEF", className, style, antialias = true, patternScale = 2, patternDensity = 1, liquid = false, liquidStrength = 0.1, liquidRadius = 1, pixelSizeJitter = 0, enableRipples = true, rippleIntensityScale = 1, rippleThickness = 0.1, rippleSpeed = 0.3, liquidWobbleSpeed = 4.5, autoPauseOffscreen = true, speed = 0.5, transparent = true, edgeFade = 0.5, noiseAmount = 0, }) => { const containerRef = useRef(null) const visibilityRef = useRef({ visible: true }) const speedRef = useRef(speed) const threeRef = useRef<{ renderer: THREE.WebGLRenderer scene: THREE.Scene camera: THREE.OrthographicCamera material: THREE.ShaderMaterial clock: THREE.Clock clickIx: number uniforms: { uResolution: { value: THREE.Vector2 } uTime: { value: number } uColor: { value: THREE.Color } uClickPos: { value: THREE.Vector2[] } uClickTimes: { value: Float32Array } uShapeType: { value: number } uPixelSize: { value: number } uScale: { value: number } uDensity: { value: number } uPixelJitter: { value: number } uEnableRipples: { value: number } uRippleSpeed: { value: number } uRippleThickness: { value: number } uRippleIntensity: { value: number } uEdgeFade: { value: number } } resizeObserver?: ResizeObserver raf?: number quad?: THREE.Mesh timeOffset?: number composer?: EffectComposer touch?: ReturnType liquidEffect?: Effect } | null>(null) const prevConfigRef = useRef(null) useEffect(() => { const container = containerRef.current if (!container) return speedRef.current = speed const needsReinitKeys = ["antialias", "liquid", "noiseAmount"] const cfg = { antialias, liquid, noiseAmount } let mustReinit = false if (!threeRef.current) mustReinit = true else if (prevConfigRef.current) { for (const k of needsReinitKeys) if (prevConfigRef.current[k] !== (cfg as any)[k]) { mustReinit = true break } } if (mustReinit) { if (threeRef.current) { const t = threeRef.current t.resizeObserver?.disconnect() cancelAnimationFrame(t.raf!) t.quad?.geometry.dispose() t.material.dispose() t.composer?.dispose() t.renderer.dispose() if (t.renderer.domElement.parentElement === container) container.removeChild(t.renderer.domElement) threeRef.current = null } const canvas = document.createElement("canvas") const renderer = new THREE.WebGLRenderer({ canvas, antialias, alpha: true, powerPreference: "high-performance", }) renderer.domElement.style.width = "100%" renderer.domElement.style.height = "100%" renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2)) container.appendChild(renderer.domElement) if (transparent) renderer.setClearAlpha(0) else renderer.setClearColor(0x000000, 1) const uniforms = { uResolution: { value: new THREE.Vector2(0, 0) }, uTime: { value: 0 }, uColor: { value: new THREE.Color(color) }, uClickPos: { value: Array.from({ length: MAX_CLICKS }, () => new THREE.Vector2(-1, -1)), }, uClickTimes: { value: new Float32Array(MAX_CLICKS) }, uShapeType: { value: SHAPE_MAP[variant] ?? 0 }, uPixelSize: { value: pixelSize * renderer.getPixelRatio() }, uScale: { value: patternScale }, uDensity: { value: patternDensity }, uPixelJitter: { value: pixelSizeJitter }, uEnableRipples: { value: enableRipples ? 1 : 0 }, uRippleSpeed: { value: rippleSpeed }, uRippleThickness: { value: rippleThickness }, uRippleIntensity: { value: rippleIntensityScale }, uEdgeFade: { value: edgeFade }, } const scene = new THREE.Scene() const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1) const material = new THREE.ShaderMaterial({ vertexShader: VERTEX_SRC, fragmentShader: FRAGMENT_SRC, uniforms, transparent: true, depthTest: false, depthWrite: false, glslVersion: THREE.GLSL3, }) const quadGeom = new THREE.PlaneGeometry(2, 2) const quad = new THREE.Mesh(quadGeom, material) scene.add(quad) const clock = new THREE.Clock() const setSize = () => { const w = container.clientWidth || 1 const h = container.clientHeight || 1 renderer.setSize(w, h, false) uniforms.uResolution.value.set(renderer.domElement.width, renderer.domElement.height) if (threeRef.current?.composer) threeRef.current.composer.setSize(renderer.domElement.width, renderer.domElement.height) uniforms.uPixelSize.value = pixelSize * renderer.getPixelRatio() } setSize() const ro = new ResizeObserver(setSize) ro.observe(container) const randomFloat = () => { if (typeof window !== "undefined" && (window as any).crypto?.getRandomValues) { const u32 = new Uint32Array(1) window.crypto.getRandomValues(u32) return u32[0] / 0xffffffff } return Math.random() } const timeOffset = randomFloat() * 1000 let composer: EffectComposer | undefined let touch: ReturnType | undefined let liquidEffect: Effect | undefined if (liquid) { touch = createTouchTexture() touch.radiusScale = liquidRadius composer = new EffectComposer(renderer) const renderPass = new RenderPass(scene, camera) liquidEffect = createLiquidEffect(touch.texture, { strength: liquidStrength, freq: liquidWobbleSpeed, }) const effectPass = new EffectPass(camera, liquidEffect) effectPass.renderToScreen = true composer.addPass(renderPass) composer.addPass(effectPass) } if (noiseAmount > 0) { if (!composer) { composer = new EffectComposer(renderer) composer.addPass(new RenderPass(scene, camera)) } const noiseEffect = new Effect( "NoiseEffect", `uniform float uTime; uniform float uAmount; float hash(vec2 p){ return fract(sin(dot(p, vec2(127.1,311.7))) * 43758.5453);} void mainUv(inout vec2 uv){} void mainImage(const in vec4 inputColor,const in vec2 uv,out vec4 outputColor){ float n=hash(floor(uv*vec2(1920.0,1080.0))+floor(uTime*60.0)); float g=(n-0.5)*uAmount; outputColor=inputColor+vec4(vec3(g),0.0);} `, { uniforms: new Map([ ["uTime", new THREE.Uniform(0)], ["uAmount", new THREE.Uniform(noiseAmount)], ]), }, ) const noisePass = new EffectPass(camera, noiseEffect) noisePass.renderToScreen = true if (composer && composer.passes.length > 0) composer.passes.forEach((p) => ((p as any).renderToScreen = false)) composer.addPass(noisePass) } if (composer) composer.setSize(renderer.domElement.width, renderer.domElement.height) const mapToPixels = (e: PointerEvent) => { const rect = renderer.domElement.getBoundingClientRect() const scaleX = renderer.domElement.width / rect.width const scaleY = renderer.domElement.height / rect.height const fx = (e.clientX - rect.left) * scaleX const fy = (rect.height - (e.clientY - rect.top)) * scaleY return { fx, fy, w: renderer.domElement.width, h: renderer.domElement.height, } } const onPointerDown = (e: PointerEvent) => { const { fx, fy } = mapToPixels(e) const ix = threeRef.current?.clickIx ?? 0 uniforms.uClickPos.value[ix].set(fx, fy) uniforms.uClickTimes.value[ix] = uniforms.uTime.value if (threeRef.current) threeRef.current.clickIx = (ix + 1) % MAX_CLICKS } const onPointerMove = (e: PointerEvent) => { if (!touch) return const { fx, fy, w, h } = mapToPixels(e) touch.addTouch({ x: fx / w, y: fy / h }) } renderer.domElement.addEventListener("pointerdown", onPointerDown, { passive: true, }) renderer.domElement.addEventListener("pointermove", onPointerMove, { passive: true, }) let raf = 0 const animate = () => { if (autoPauseOffscreen && !visibilityRef.current.visible) { raf = requestAnimationFrame(animate) return } uniforms.uTime.value = timeOffset + clock.getElapsedTime() * speedRef.current if (liquidEffect) (liquidEffect as any).uniforms.get("uTime").value = uniforms.uTime.value if (composer) { if (touch) touch.update() composer.passes.forEach((p) => { const effs = (p as any).effects if (effs) effs.forEach((eff: any) => { const u = eff.uniforms?.get("uTime") if (u) u.value = uniforms.uTime.value }) }) composer.render() } else renderer.render(scene, camera) raf = requestAnimationFrame(animate) } raf = requestAnimationFrame(animate) threeRef.current = { renderer, scene, camera, material, clock, clickIx: 0, uniforms, resizeObserver: ro, raf, quad, timeOffset, composer, touch, liquidEffect, } } else { const t = threeRef.current! t.uniforms.uShapeType.value = SHAPE_MAP[variant] ?? 0 t.uniforms.uPixelSize.value = pixelSize * t.renderer.getPixelRatio() t.uniforms.uColor.value.set(color) t.uniforms.uScale.value = patternScale t.uniforms.uDensity.value = patternDensity t.uniforms.uPixelJitter.value = pixelSizeJitter t.uniforms.uEnableRipples.value = enableRipples ? 1 : 0 t.uniforms.uRippleIntensity.value = rippleIntensityScale t.uniforms.uRippleThickness.value = rippleThickness t.uniforms.uRippleSpeed.value = rippleSpeed t.uniforms.uEdgeFade.value = edgeFade if (transparent) t.renderer.setClearAlpha(0) else t.renderer.setClearColor(0x000000, 1) if (t.liquidEffect) { const uStrength = (t.liquidEffect as any).uniforms.get("uStrength") if (uStrength) uStrength.value = liquidStrength const uFreq = (t.liquidEffect as any).uniforms.get("uFreq") if (uFreq) uFreq.value = liquidWobbleSpeed } if (t.touch) t.touch.radiusScale = liquidRadius } prevConfigRef.current = cfg return () => { if (threeRef.current && mustReinit) return if (!threeRef.current) return const t = threeRef.current t.resizeObserver?.disconnect() cancelAnimationFrame(t.raf!) t.quad?.geometry.dispose() t.material.dispose() t.composer?.dispose() t.renderer.dispose() if (t.renderer.domElement.parentElement === container) container.removeChild(t.renderer.domElement) threeRef.current = null } }, [ antialias, liquid, noiseAmount, pixelSize, patternScale, patternDensity, enableRipples, rippleIntensityScale, rippleThickness, rippleSpeed, pixelSizeJitter, edgeFade, transparent, liquidStrength, liquidRadius, liquidWobbleSpeed, autoPauseOffscreen, variant, color, speed, ]) return (

) } export default PixelBlast [V0_FILE]json:file="package.json" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.0", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.76", "three": "0.181.1", "postprocessing": "6.38.0", "gsap": "^3.12.5" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]jpg:file="public/hackfest-logo-minimal-h-letter.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/hackfest-logo-minimal-h-letter-xlZdHpI9G8U3kcssUrw799YMm4gFIx.jpg" [V0_FILE]typescriptreact:file="components/navigation.tsx" "use client" import PillNav from "./pill-nav" export function Navigation() { const navItems = [ { label: "Home", href: "#hero" }, { label: "About", href: "#about" }, { label: "Timeline", href: "#timeline" }, { label: "Tracks", href: "#tracks" }, { label: "Prizes", href: "#prizes" }, { label: "Rules", href: "#rules" }, { label: "Mentors", href: "#mentors" }, ] return ( ) } [V0_FILE]typescriptreact:file="app/page.tsx" import { Hero } from "@/components/hero" import { About } from "@/components/about" import { Timeline } from "@/components/timeline" import { Tracks } from "@/components/tracks" import { Prizes } from "@/components/prizes" import { Rules } from "@/components/rules" import { Mentors } from "@/components/mentors" import { Partners } from "@/components/partners" import { Footer } from "@/components/footer" import { Navigation } from "@/components/navigation" export default function HomePage() { return (

) } [V0_FILE]typescriptreact:file="components/pill-nav.tsx" isQuickEdit="true" "use client" import type React from "react" import { useEffect, useRef, useState } from "react" import { gsap } from "gsap" export type PillNavItem = { label: string href: string ariaLabel?: string } export interface PillNavProps { logo: string logoAlt?: string items: PillNavItem[] activeHref?: string className?: string ease?: string baseColor?: string pillColor?: string hoveredPillTextColor?: string pillTextColor?: string onMobileMenuClick?: () => void initialLoadAnimation?: boolean } const PillNav: React.FC = ({ logo, logoAlt = "Logo", items, activeHref, className = "", ease = "power3.easeOut", baseColor = "#fff", pillColor = "#060010", hoveredPillTextColor = "#060010", pillTextColor, onMobileMenuClick, initialLoadAnimation = true, }) => { const resolvedPillTextColor = pillTextColor ?? baseColor const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false) const circleRefs = useRef>([]) const tlRefs = useRef>([]) const activeTweenRefs = useRef>([]) const logoImgRef = useRef(null) const logoTweenRef = useRef(null) const hamburgerRef = useRef(null) const mobileMenuRef = useRef(null) const navItemsRef = useRef(null) const logoRef = useRef(null) useEffect(() => { const layout = () => { circleRefs.current.forEach((circle) => { if (!circle?.parentElement) return const pill = circle.parentElement as HTMLElement const rect = pill.getBoundingClientRect() const { width: w, height: h } = rect const R = ((w * w) / 4 + h * h) / (2 * h) const D = Math.ceil(2 * R) + 2 const delta = Math.ceil(R - Math.sqrt(Math.max(0, R * R - (w * w) / 4))) + 1 const originY = D - delta circle.style.width = `${D}px` circle.style.height = `${D}px` circle.style.bottom = `-${delta}px` gsap.set(circle, { xPercent: -50, scale: 0, transformOrigin: `50% ${originY}px`, }) const label = pill.querySelector(".pill-label") const white = pill.querySelector(".pill-label-hover") if (label) gsap.set(label, { y: 0 }) if (white) gsap.set(white, { y: h + 12, opacity: 0 }) const index = circleRefs.current.indexOf(circle) if (index === -1) return tlRefs.current[index]?.kill() const tl = gsap.timeline({ paused: true }) tl.to(circle, { scale: 1.2, xPercent: -50, duration: 2, ease, overwrite: "auto" }, 0) if (label) { tl.to(label, { y: -(h + 8), duration: 2, ease, overwrite: "auto" }, 0) } if (white) { gsap.set(white, { y: Math.ceil(h + 100), opacity: 0 }) tl.to(white, { y: 0, opacity: 1, duration: 2, ease, overwrite: "auto" }, 0) } tlRefs.current[index] = tl }) } layout() const onResize = () => layout() window.addEventListener("resize", onResize) if (document.fonts) { document.fonts.ready.then(layout).catch(() => {}) } const menu = mobileMenuRef.current if (menu) { gsap.set(menu, { visibility: "hidden", opacity: 0, scaleY: 1, y: 0 }) } if (initialLoadAnimation) { const logo = logoRef.current const navItems = navItemsRef.current if (logo) { gsap.set(logo, { scale: 0 }) gsap.to(logo, { scale: 1, duration: 0.6, ease, }) } if (navItems) { gsap.set(navItems, { width: 0, overflow: "hidden" }) gsap.to(navItems, { width: "auto", duration: 0.6, ease, }) } } return () => window.removeEventListener("resize", onResize) }, [items, ease, initialLoadAnimation]) const handleEnter = (i: number) => { const tl = tlRefs.current[i] if (!tl) return activeTweenRefs.current[i]?.kill() activeTweenRefs.current[i] = tl.tweenTo(tl.duration(), { duration: 0.3, ease, overwrite: "auto", }) } const handleLeave = (i: number) => { const tl = tlRefs.current[i] if (!tl) return activeTweenRefs.current[i]?.kill() activeTweenRefs.current[i] = tl.tweenTo(0, { duration: 0.2, ease, overwrite: "auto", }) } const handleLogoEnter = () => { const img = logoImgRef.current if (!img) return logoTweenRef.current?.kill() gsap.set(img, { rotate: 0 }) logoTweenRef.current = gsap.to(img, { rotate: 360, duration: 0.2, ease, overwrite: "auto", }) } const toggleMobileMenu = () => { const newState = !isMobileMenuOpen setIsMobileMenuOpen(newState) const hamburger = hamburgerRef.current const menu = mobileMenuRef.current if (hamburger) { const lines = hamburger.querySelectorAll(".hamburger-line") if (newState) { gsap.to(lines[0], { rotation: 45, y: 3, duration: 0.3, ease }) gsap.to(lines[1], { rotation: -45, y: -3, duration: 0.3, ease }) } else { gsap.to(lines[0], { rotation: 0, y: 0, duration: 0.3, ease }) gsap.to(lines[1], { rotation: 0, y: 0, duration: 0.3, ease }) } } if (menu) { if (newState) { gsap.set(menu, { visibility: "visible" }) gsap.fromTo( menu, { opacity: 0, y: 10, scaleY: 1 }, { opacity: 1, y: 0, scaleY: 1, duration: 0.3, ease, transformOrigin: "top center", }, ) } else { gsap.to(menu, { opacity: 0, y: 10, scaleY: 1, duration: 0.2, ease, transformOrigin: "top center", onComplete: () => { gsap.set(menu, { visibility: "hidden" }) }, }) } } onMobileMenuClick?.() } const isExternalLink = (href: string) => href.startsWith("http://") || href.startsWith("https://") || href.startsWith("//") || href.startsWith("mailto:") || href.startsWith("tel:") || href.startsWith("#") const cssVars = { ["--base"]: baseColor, ["--pill-bg"]: pillColor, ["--hover-text"]: hoveredPillTextColor, ["--pill-text"]: resolvedPillTextColor, ["--nav-h"]: "42px", ["--logo"]: "36px", ["--pill-pad-x"]: "18px", ["--pill-gap"]: "3px", } as React.CSSProperties return (

) => { e.currentTarget.style.background = "var(--base)" e.currentTarget.style.color = "var(--hover-text, #fff)" } const hoverOut = (e: React.MouseEvent) => { e.currentTarget.style.background = "var(--pill-bg, #fff)" e.currentTarget.style.color = "var(--pill-text, #fff)" } const linkClasses = "block py-3 px-4 text-[16px] font-medium rounded-[50px] transition-all duration-200 ease-[cubic-bezier(0.25,0.1,0.25,1)]" return (

setIsMobileMenuOpen(false)} > {item.label}

) })}

) } export default PillNav [V0_FILE]typescriptreact:file="app/layout.tsx" isQuickEdit="true" import type React from "react" import type { Metadata } from "next" import "./globals.css" import { Geist_Mono as V0_Font_Geist_Mono } from 'next/font/google' // Initialize fonts const _geistMono = V0_Font_Geist_Mono({ subsets: ['latin'], weight: ["100","200","300","400","500","600","700","800","900"] }) export const metadata: Metadata = { title: "HackFest 2025 | Build the Future", description: "Join innovators from around the world for 24 hours of coding, creativity, and collaboration at HackFest 2025. November 14-15, 2025.", generator: "v0.app", icons: { icon: [ { url: "/icon-light-32x32.png", media: "(prefers-color-scheme: light)", }, { url: "/icon-dark-32x32.png", media: "(prefers-color-scheme: dark)", }, { url: "/icon.svg", type: "image/svg+xml", }, ], apple: "/apple-icon.png", }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/hero.tsx" isQuickEdit="true" "use client" import Link from "next/link" import { Button } from "@/components/ui/button" import PixelBlast from "./pixel-blast" export function Hero() { return (

{/* PixelBlast background */}

Prize Pool: $3,000

24 Hours. Infinite Possibilities.{" "} This is HackFest.

Code. Ship. Win. November 14-15, 2025.

Registration closed • Stay connected on Discord

Virtual • Worldwide

) } [V0_FILE]typescriptreact:file="components/about.tsx" isQuickEdit="true" import Image from "next/image" export function About() { return (

About HackFest

HackFest 2025 is an intensive 24-hour virtual hackathon where innovation meets execution. Whether you're a seasoned developer or just getting started, this is your chance to build something extraordinary, learn from mentors, and compete for exciting prizes.

Choose your track, form your team, and turn your ideas into reality. From AI and web development to open-source contributions, HackFest welcomes all domains and skill levels. Join developers worldwide for a weekend of coding, collaboration, and creativity.

GDG Cloud New Delhi

) } [V0_FILE]typescriptreact:file="components/timeline.tsx" isQuickEdit="true" "use client" import { Card } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { useEffect, useState } from "react" import { CheckCircle2, Clock, Calendar, ArrowRight } from "lucide-react" export function Timeline() { const [timeLeft, setTimeLeft] = useState({ days: 0, hours: 0, minutes: 0, seconds: 0, }) useEffect(() => { const targetDate = new Date("2025-11-12T23:59:59").getTime() const updateTimer = () => { const now = new Date().getTime() const distance = targetDate - now if (distance < 0) { setTimeLeft({ days: 0, hours: 0, minutes: 0, seconds: 0 }) return } setTimeLeft({ days: Math.floor(distance / (1000 * 60 * 60 * 24)), hours: Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)), minutes: Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)), seconds: Math.floor((distance % (1000 * 60)) / 1000), }) } updateTimer() const interval = setInterval(updateTimer, 1000) return () => clearInterval(interval) }, []) return (

Timeline

Track the hackathon journey from registration to celebration

{/* Past Phase */}

Past

Registration

Closed

✓ Team formation completed

✓ Registration period ended

{/* Live Phase */}

Live Now

PHASE 1

Idea Submission

November 10-12, 2025

Time Remaining

{String(timeLeft.days).padStart(2, "0")}

Days

{String(timeLeft.hours).padStart(2, "0")}

Hrs

{String(timeLeft.minutes).padStart(2, "0")}

Min

{String(timeLeft.seconds).padStart(2, "0")}

Sec

{/* Upcoming Phase */}

Upcoming

PHASE 2

Coming Soon

→ 24-hour hacking window

→ Build your prototype

→ Final project submission

Details will be announced soon

) } [V0_FILE]typescriptreact:file="components/tracks.tsx" isQuickEdit="true" import Link from "next/link" import { Button } from "@/components/ui/button" import { ExternalLink, Github } from "lucide-react" export function Tracks() { const tracks = [ { title: "Healthcare & Wellbeing", description: "Build conversational solutions that improve patient care, medication adherence, and healthcare accessibility through intelligent voice and chat interactions.", }, { title: "Smart Productivity & Organization", description: "Develop AI assistants that streamline professional tasks, optimize personal finances, and enhance decision-making through natural conversations.", }, { title: "Next-Gen Learning & Assistance", description: "Create intelligent tutors and assistants that personalize learning experiences, break language barriers, and simplify everyday tasks through conversational interfaces.", }, { title: "Social & Community", description: "Design conversational tools that strengthen communities, support mental wellness, and facilitate civic engagement through empathetic and accessible interactions.", }, { title: "Business & Commerce", description: "Transform customer experiences and business operations with conversational agents that automate support, manage inventory, and qualify leads efficiently.", }, ] return (

Challenge Tracks

Choose a track that aligns with your vision and build conversational AI solutions that make a real impact. All problem statements are available on our official repository.

{tracks.slice(0, 3).map((track, index) => (

{index + 1}

{track.title}

{track.description}

))}

{tracks.slice(3).map((track, index) => (

{index + 4}

{track.title}

{track.description}

))}

) } [V0_FILE]typescriptreact:file="components/prizes.tsx" isQuickEdit="true" "use client" import { Card } from "@/components/ui/card" export function Prizes() { return (

{/* Header */}

Prizes

$3,000 total prize pool

{/* Prize Cards */}

{/* 2nd Place */}

2nd Place

$750

• Cash prize
• Premium swag kit
• Certificate

{/* 1st Place */}

1st Place

$1,000

• Cash prize
• Premium swag kit
• Winner certificate

{/* 3rd Place */}

3rd Place

$500

• Cash prize
• Swag goodies
• Certificate

{/* All Participants */}

All Participants

Mentorship

Expert guidance throughout

Certificate

Digital participation certificate

Networking

Connect with the community

) } [V0_FILE]typescriptreact:file="components/rules.tsx" isQuickEdit="true" export function Rules() { const rules = [ { title: "Team Size", description: "Teams of 1-4 members are allowed. Solo participants are welcome.", }, { title: "Development Window", description: "All code must be written during the 24-hour hackathon window (Nov 14-15).", }, { title: "Originality", description: "Projects must be original work created specifically for HackFest 2025.", }, { title: "Agora Integration", description: "Using Agora's Conversational AI in your project is mandatory for all submissions.", }, { title: "External Resources", description: "Open source libraries, frameworks, and APIs are permitted and encouraged.", }, { title: "Track Alignment", description: "Your project must align with at least one of the five challenge tracks.", }, { title: "Submission Requirements", description: "Include a demo video, working prototype, and visual presentation slides.", }, { title: "Code of Conduct", description: "Follow the GDG Code of Conduct. Be respectful, inclusive, and collaborative.", }, { title: "Have Fun", description: "Learn, experiment, and build something you're proud of.", }, ] return (

Rules & Guidelines

Simple guidelines to ensure a fair and productive hackathon for everyone.

{rules.map((rule, index) => (

{index + 1}

{rule.title}

{rule.description}

))}

Questions about the rules?{" "} Ask on Discord

) } [V0_FILE]typescriptreact:file="components/mentors.tsx" export function Mentors() { return (

Mentors

Get guidance from industry experts throughout the hackathon. Our mentors bring years of experience from leading tech companies and startups. Whether you need help debugging, architecture advice, or design feedback, mentors will be available via Discord for office hours and one-on-one sessions.

) } [V0_FILE]typescriptreact:file="components/partners.tsx" isQuickEdit="true" import Image from "next/image" export function Partners() { const partners = [ { name: "Commudle", logo: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Commudle%20Logo-qFtBVd2JqLSzsE3e7nrtPcm7N6CkBl.png", role: "Platform Partner", }, { name: "Creadefy", logo: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/creadefy-yg3rsR9sFuoF63OcWQTfQDeplEZJ2I.png", role: "Certificate Partner", }, ] return (

Our Partners

{partners.map((partner) => (

{partner.name}

{partner.role}

))}

) } [V0_FILE]typescriptreact:file="components/footer.tsx" isQuickEdit="true" import Link from "next/link" export function Footer() { return ( ) }

About

Tags

Share

About

Tags

Share

More from nikhilsbuilds

About

Tags

Share

About

Tags

Share

More from nikhilsbuilds